<template>
    <div class="common-layout">
    <el-container>
      <el-header>
            <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to='/friend' active-class="active" class="navi-style" replace>交友</RouterLink>
      <RouterLink to='/community' active-class="active" class="navi-style" replace>社区</RouterLink>
      <RouterLink to='/home' active-class="active" class="navi-style" replace>个人中心</RouterLink>
      <!-- 点击发帖 -->
      <button class="navi-style" @click="makePost">发帖</button>
      <button class="navi-style" @click="exit">退出</button>
    </div>
      </el-header>
      <el-main>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
      </el-main>
    </el-container>
  </div>
  <div>


  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

function makePost() {
  router.push({
    path: "/makePost"
  })
}

function exit() {
  router.push({
    path: "/login"
  })
}

onMounted(() => {
  console.log("@")
})
</script>

<style scoped>
.active {
  color: red;
}

.navi-style {
  margin-left: 10px;
}

.main-content {
  margin-top: 10px;
}
</style>